<template>
  <div class="Personaltailor">
    <section class="toolTop">
      <el-row :gutter="24" class="top_wrap">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">私人订制服务计费</span>
            </div>
            <div class="text item">
              <el-form :inline="true" class="demo-form-inline">
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="text_wrap">
                      <label class="title">{{cloudtitleupgrade}}</label>
                      <el-form-item>
                        <el-radio-group v-model="cloudShow" size="mini">
                          <el-radio
                            v-for="item in List"
                            v-bind:label="item.label"
                            v-bind:key="item.name"
                            border
                          >{{item.name}}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="text_wrap">
                      <label class="title">{{deviceCountupgrade}}</label>
                      <el-form-item>
                        <el-radio-group v-model="cloudShow2" size="mini">
                          <el-radio
                            v-for="item in List2"
                            v-bind:label="item.label"
                            v-bind:key="item.name"
                            border
                          >{{item.name}}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="text_wrap">
                      <label class="title">{{bandwidthUpgrade}}</label>
                      <el-form-item>
                        <el-radio-group v-model="cloudShow3" size="mini">
                          <el-radio
                            v-for="item in List3"
                            v-bind:label="item.label"
                            v-bind:key="item.name"
                            border
                          >{{item.name}}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="text_wrap">
                      <label class="title">{{lifetimeupgrade}}</label>
                      <el-form-item>
                        <el-radio-group v-model="cloudShow4" size="mini">
                          <el-radio
                            v-for="item in List4"
                            v-bind:label="item.label"
                            v-bind:key="item.name"
                            border
                          >{{item.name}}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="price">
                      <el-form-item>
                        <label>价格:</label>
                        <span>￥{{money}}</span>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <div class="pay_wrap">
                      <el-form-item>
                        <el-button type="primary"  @click="payClickBtn">立即购买</el-button>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/usermg/subpayment/personaltailor.js"></script>

<style lang="scss">
.Personaltailor {
  flex: 1;
  > section {
    &.toolTop {
      height: auto !important;
      padding-bottom: 17px;
      .top_wrap {
        border-radius: 5px;
        padding: 8px 16px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #ffffff;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
          }
          .el-card__body {
            .text {
              .el-form {
                .text_wrap {
                  display: flex;
                  flex-direction: column;
                  .el-form-item {
                    .el-radio-group {
                      margin-left: 0%;
                      .el-radio {
                        margin-right: 0px;
                        height: 30px;
                        margin-left: 10px;
                        border: 1px solid #9da4af;
                        .el-radio__inner {
                          border: none;
                          border-radius: 5px;
                          background-color: #1f2548;
                        }
                        .el-radio__inner::after {
                          border: none;
                          border-radius: 5px;
                          background-color: #1f2548;
                        }
                        .el-radio__label {
                          color: #9da4af;
                          padding-left: 0px;
                        }
                      }
                      .el-radio.is-checked {
                        border: 1px solid #ffffff;
                        color: #ffffff;
                        span {
                          color: #ffffff;
                        }
                      }
                    }
                  }

                  .title {
                    color: #9da4af;
                    font-size: 16px;
                  }
                }
              }
              .price {
                margin-top: 2%;
                label {
                  color: #9da4af;
                  font-size: 18px;
                }
                span {
                  color: #f8666a;
                  font-size: 30px;
                }
              }
              .pay_wrap {
                .el-form-item {
                  width:100%;
                  .el-form-item__content {
                    width: 20%;
                    margin-top:-1%;
                    .el-button {
                      margin-top: -6%;
                      background: #44abf5;
                      height: 30px;
                      line-height: 5px;
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
